<template>
	<div class="cl-upload">
		<!-- -->
		<div>
			<el-upload
				class="upload-demo"
				:action="action"
				size="mini"
				:headers="{
					Authorization: token
				}"
				accept="video/*"
				:on-remove="handleRemove"
				:before-remove="beforeRemove"
				:on-success="onSuccess"
				:limit="3"
				:on-exceed="handleExceed"
				:file-list="fileList"
				:show-file-list="true"
			>
				<div>
					<el-button size="small" type="primary">点击上传</el-button>
				</div>
				<div class="video-list" slot="file" slot-scope="{ file }">
					<div class="video-list-item" v-for="item in list" :key="item.url">
						<video
							muted
							autoplay
							controls="controls"
							class="video-list-item"
							:src="item.url"
						>
							Your browser does not support the video tag.
						</video>
						<div class="delete-icons">
							<span
								@click="handleRemoveVideo(file)"
								class="el-upload-list__item-actions"
							>
								<i class="el-icon-delete"></i>
							</span>
						</div>
					</div>
				</div>
			</el-upload>
		</div>
		<el-dialog class="my-dialog" :modal="false" :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="" />
		</el-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	name: 'video-list',
	props: {
		props: {
			type: Object,
			default: () => {
				return {};
			}
		},
		value: [Array, String]
	},

	data() {
		const upload = this.$service.common.upload();

		return {
			action: upload.url,
			list: [],
			fileList: [],
			dialogImageUrl: '',
			dialogVisible: false,
			disabled: false
		};
	},

	computed: {
		...mapGetters(['token'])
	},

	watch: {
		value(val) {
			if (!val) {
				return;
			}
			if (val instanceof Array) {
				this.list = val;
			} else {
				let list = val.split(',').map(item => {
					return {
						url: item,
						uid: parseInt(Math.random() * 1000000)
					};
				});
				console.log(list);
				this.list = list;
				this.fileList = list;
			}
		}
	},

	mounted() {
		// this.render();
	},

	methods: {
		callback() {
			this.$emit(
				'input',
				this.list
					.filter(e => e.url)
					.map(e => e.url)
					.join(',')
			);
		},

		onSuccess(res, file, fileList) {
			this.list = fileList.map(e => {
				return {
					...e,
					url: res.data
				};
			});
			this.callback();
		},

		onError(err) {
			console.error('upload error', err);
			this.$message.error(err.toString());
		},
		handleRemoveVideo(file) {
			this.fileList = this.list.filter(e => {
				return e.uid != file.uid;
			});
			this.list = this.fileList;
			this.callback();
		},
		handleRemove(file, fileList) {
			this.list = fileList;
			this.callback();
		},
		handleExceed(files) {
			this.$message.warning(
				`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length +
					this.fileList.length} 个文件`
			);
		},
		beforeRemove() {
			return this.$confirm(`确定移除 该视频？`);
		}
	}
};
</script>

<style lang="stylus" scoped>

.video-list {
    margin-top 10px
    display flex
    align-items center
    background-color #ffffff
    .video-list-item  {
        max-width 200px
        margin 0 5px
        border-radius 10px
        overflow hidden
        .delete-icons {
            text-align center
            font-size 20px
            cursor pointer;
            :hover {
                opacity .8
            }
        }
    }
}
</style>
